
<!-- Content Header (Page header) -->
<section class="content-header">
	<h1>菜单/功能管理</h1>
	<ol class="breadcrumb">
		<li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i>
				首页</a></li>
		<li><a href="#">系统管理</a></li>
		<li class="active">菜单/功能管理</li>
	</ol>
</section>

<!-- Main content -->
<section class="content">

	<div class="row">
		<div class="col-md-3">

			<!-- Profile Image -->
			<div class="box box-primary">
				<div class="box-body box-profile">
					<div id="tree"></div>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->
		</div>
		<!-- /.col -->
		<div class="col-md-9">
			<div class="box box-primary">
				<div class="box-header with-border">
					<div class="btn-group">
						<button type="button" class="btn btn-default"
							data-btn-type="addRoot">
							<li class="fa fa-plus">&nbsp;新增根菜单</li>
						</button>
						<button type="button" class="btn btn-default" data-btn-type="add">
							<li class="fa fa-plus">&nbsp;新增下级菜单</li>
						</button>
						<button type="button" class="btn btn-default" data-btn-type="edit">
							<li class="fa fa-edit">&nbsp;编辑当前菜单</li>
						</button>
						<button type="button" class="btn btn-default"
							data-btn-type="delete">
							<li class="fa fa-remove">&nbsp;删除当前菜单</li>
						</button>
					</div>
					<!-- /.box-tools -->
				</div>
				<!-- /.box-header -->
				<div class="box-body">
					<form class="form-horizontal" id="function-form">
						<input type="hidden" name="parentId" />
						<input type="hidden" name="id" />
						<div class="form-group">
							<label for="parentName" class="col-sm-2 control-label">上级</label>

							<div class="col-sm-9">
								<input type="text" class="form-control" disabled="disabled"
									id="parentName" name="parentName" placeholder="上级">
							</div>
						</div>

						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">名称</label>

							<div class="col-sm-9">
								<input type="text" class="form-control" id="name" name="name"
									placeholder="名称">
							</div>
						</div>
						<div class="form-group">
							<label for="url" class="col-sm-2 control-label">URL</label>

							<div class="col-sm-9">
								<input type="text" class="form-control" id="url" name="url"
									placeholder="URL">
							</div>
						</div>
						<div class="form-group">
							<label for="bh" class="col-sm-2 control-label">编号</label>

							<div class="col-sm-9">
								<input type="text" class="form-control" id="bh"
									name="bh" placeholder="层级编码">
							</div>
						</div>
						<div class="form-group">
							<label for="icon" class="col-sm-2 control-label">图标</label>
							<div class="col-sm-7">
								<i data-bv-icon-for="icon" id="icon_i"
									class="form-control-feedback fa fa-circle-o"
									style="right: 15px"></i>
								<input type="text"
									class="form-control" id="icon" name="icon" placeholder="图标">
							</div>
							<div class="col-sm-2">
								<button type="button" id="selectIcon"
									class="btn btn-primary disabled" data-btn-type="selectIcon">
									<i class="fa fa-hand-pointer-o">&nbsp;选择图标</i>
								</button>
							</div>
						</div>
						<div class="form-group">
							<label for="remark" class="col-sm-2 control-label">说明</label>
							<div class="col-sm-9">
								<textarea class="form-control" id="remark" name="remark"
									placeholder="说明"></textarea>
							</div>
						</div>
						<div class="box-footer" style="display: none">
							<div class="text-center">
								<button type="button" class="btn btn-default"
									data-btn-type="cancel">
									<i class="fa fa-reply">&nbsp;取消</i>
								</button>
								<button type="button" class="btn btn-primary save">
									<i class="fa fa-save">&nbsp;保存</i>
								</button>
							</div>
						</div>
					</form>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /. box -->
		</div>
	</div>
	<!-- /.row -->

</section>

<script>
	//初始化form表单
	var form = $('#function-form');
	var winId = 'iconWin';
	$(function() {
		initTree(0);
        $("#tree").slimScroll({
            height : '500px'
        });

		//初始化校验
        $('#function-form .save').click(function () {
            var params = getFormData(form);
            if(btntype=="edit"){
                AsyncPut('/root/function', params, function (value) {
                    modals.correct("操作成功");
                    var selectedArr = $("#tree").data("treeview").getSelected();
                    var selectedNodeId = selectedArr.length > 0 ? selectedArr[0].nodeId: 0;
                    initTree(selectedNodeId);
                });
			}else{
                AsyncPost('/root/function', params, function (value) {
                    modals.correct("操作成功");
                    var selectedArr = $("#tree").data("treeview").getSelected();
                    var selectedNodeId = selectedArr.length > 0 ? selectedArr[0].nodeId: 0;
                    initTree(selectedNodeId);
                });
			}
        });

        //按钮事件
		var btntype = null;
		$('button[data-btn-type]')
				.click(
						function() {
							var action = $(this).attr('data-btn-type');
							var selectedArr = $("#tree").data("treeview").getSelected();
							var selectedNode = selectedArr.length > 0 ? selectedArr[0]
									: null;
							switch (action) {
							case 'addRoot':
								formWritable(action);
								clearFormData(form);
								$("#icon_i").removeClass();
								//填充上级菜单和层级编码
								fillParentAndLevelCode(null);
								btntype = 'add';
								break;
							case 'add':
								if (!selectedNode) {
									modals.info('请先选择上级菜单');
									return false;
								}
								formWritable(action);
                                clearFormData(form);
								$("#icon_i").removeClass();
								//填充上级菜单和层级编码
								fillParentAndLevelCode(selectedNode);
								btntype = 'add';
								break;
							case 'edit':
								if (!selectedNode) {
									modals.info('请先选择要编辑的节点');
									return false;
								}
								if (btntype == 'add') {
									fillFunctionForm(selectedNode);
								}
								formWritable(action);
								btntype = 'edit';
								break;
							case 'delete':
								if (!selectedNode) {
									modals.info('请先选择要删除的节点');
									return false;
								}
								if (btntype == 'add')
									fillFunctionForm(selectedNode);
								formReadonly();
								$(".box-header button[data-btn-type='delete']")
									.removeClass("btn-default")
									.addClass("btn-primary");
								if (selectedNode.nodes) {
									modals.info('该节点含有子节点，请先删除子节点');
									return false;
								}
                                modals.confirm('是否删除该节点', function () {
                                    AsyncDelete("/root/function/" + selectedNode.id, null, function (data) {
                                        modals.correct("删除成功");
                                        //定位
                                        var brothers = $("#tree").data("treeview").getSiblings(selectedNode);
                                        if (brothers.length > 0)
                                            initTree(brothers[brothers.length - 1].nodeId);
                                        else {
                                            var parent = $("#tree").data("treeview").getParent(selectedNode);
                                            initTree(parent ? parent.nodeId: 0);
                                        }
                                    });
                                });
                                break;
                            case 'cancel':
								if (btntype == 'add')
									fillFunctionForm(selectedNode);
								formReadonly();
								break;
							case 'selectIcon':
								var disabled = $(this).hasClass("disabled");
								if (disabled)
									break;
								modals.openWin({
											winId : winId,
											title : '图标选择器（双击选择）',
											width : '1000px',
											url : "../icon/icon_selector.html"
										});
								break;
							}
						});
	})

	function initTree(selectNodeId) {
		AsyncGet("/root/function/tree", null, function(treeData) {
            $("#tree").treeview({
                data : treeData,
                showBorder : true,
                collapseIcon : "glyphicon glyphicon-minus",
                expandIcon : "glyphicon glyphicon-plus",
                levels : 1,
                onNodeSelected : function(event, data) {
                    fillFunctionForm(data);
                    formReadonly();
                }
            });
            if (treeData.length == 0)
                return;
            //默认选中第一个节点
            selectNodeId = selectNodeId || 0;
            $("#tree").data('treeview').selectNode(selectNodeId);
            $("#tree").data('treeview').expandNode(selectNodeId);
            $("#tree").data('treeview').revealNode(selectNodeId);
		});
	}

	//新增时，带入父级菜单名称id,自动生成levelcode
	function fillParentAndLevelCode(selectedNode) {
		$("input[name='parentName']").val(
				selectedNode ? selectedNode.text : '系统菜单');
		if (selectedNode) {
			$("input[name='parentId']").val(selectedNode.id);
			var nodes = selectedNode.nodes;
			var bh = nodes ? nodes[nodes.length - 1].bh : null;
			$("input[name='bh']").val(
					getNextCode(selectedNode.bh, bh, 6));
		} else {
			var brothers = null;
			brothers = $("#tree").data("treeview").getSiblings(0);
			var bh = "000000";
			if (brothers && brothers.length > 0)
                bh = brothers[brothers.length - 1].bh;
			$("input[name='bh']").val(getNextCode("", bh, 6));
		}
	}

	//填充form
	function fillFunctionForm(node) {
		clearFormData(form);
		initFormData("/root/function/" + node.id,null,form,function(data){
            fillBackIconName(data.icon);
		});
	}

	//设置form为只读
	function formReadonly() {
		//所有文本框只读
		$("input[name],textarea[name]").attr("readonly", "readonly");
		//隐藏取消、保存按钮
		$("#function-form .box-footer").hide();
		//还原新增、编辑、删除按钮样式
		$(".box-header button").removeClass("btn-primary").addClass(
				"btn-default");
		//选择图标按钮只读
		$("#selectIcon").addClass("disabled");
	}

	function formWritable(action) {
		$("input[name],textarea[name]").removeAttr("readonly");
		$("#function-form .box-footer").show();
		$(".box-header button").removeClass("btn-primary").addClass(
				"btn-default");
		$("#selectIcon").removeClass("disabled");
		if (action)
			$(".box-header button[data-btn-type='" + action + "']")
					.removeClass("btn-default").addClass("btn-primary");
	}

	//回填图标
	function fillBackIconName(icon_name) {
		$("#icon").val(icon_name);
		$("#icon_i").removeClass().addClass("form-control-feedback").addClass(
				icon_name);
	}
</script>
